<template>
  <div>
    <el-card>
      <h3>模版上传</h3>
    </el-card>
    <el-card>
      <div>
        <el-form :inline="true" :model="UpTemplate">
          <el-form-item label="上传用户:">
            <el-input v-model="UpTemplate.UpTempUser" placeholder="用户ID/账号" clearable></el-input>
          </el-form-item>
          <el-form-item label="文件名:">
            <el-input v-model="UpTemplate.TempFileName" placeholder="用户ID/账号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="getMObanLost">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button @click="Resetting">重置</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="info" @click="FileUploads">添加模型</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="TemplateList.records" style="width: 100%">
        <el-table-column prop="id" label="模型id">
        </el-table-column>
        <el-table-column prop="modelKey" label="模型标识key">
        </el-table-column>
        <el-table-column prop="modelName" label="模型名称(备注)">
        </el-table-column>
        <el-table-column prop="price" label="模型价格">
        </el-table-column>

        <el-table-column prop="modelFileName" label="文件名称">
        </el-table-column>
        <el-table-column prop="modelFileUrl" label="文件路径">
        </el-table-column>
        <el-table-column prop="enable" label="是否启用">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.enable" @change="changeSwitch(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" icon="el-icon-delete" plain @click="DelMoban(scope.row)" size="mini">删除</el-button>
            <el-button type="text" icon="el-icon-edit" plain @click="ChangeMobanx(scope.row)" size="mini">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 1000]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
        :total="TemplateList.total" style="margin: 20px 0;float: right;">
      </el-pagination>


      <!-- 文件上传弹框 -->
      <el-dialog title="文件模版上传" :visible.sync="UpTempDialog" width="420px">
        <div>
          <el-form :inline="true" :model="formInline" class="demo-form-inline" label-width="80px">
            <el-form-item label="模型标识">
              <el-input v-model="formInline.modelKey" placeholder="模型标识key"></el-input>
            </el-form-item>
            <el-form-item label="模型名称">
              <el-input v-model="formInline.modelName" placeholder="模型名称（备注）"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="formInline.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item label="类型">
              <el-input v-model="formInline.groups" placeholder="类型(test/default)"></el-input>
            </el-form-item>
            <el-form-item label="文件">
              <el-upload class="upload-demo" drag ref="uploadTemp" :http-request="onUploadTemp" action=""
                :on-preview="handlePreviewTemp" :on-remove="handleRemoveTemp" :file-list="fileListTemp"
                :on-change="handleFileChange" :on-success="uploadSuccess" :multiple="true" :auto-upload="false"
                accept="" :limit="50" :on-exceed="OnExceedTemp">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
           
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CancelFiles">取消上传</el-button>
          <el-button type="primary" @click="Determine">确定上传</el-button>
        </span>
      </el-dialog>

      <!-- 文还上传 -->


      <!-- 文件修改 -->
      <el-dialog title="文件模版修改" :visible.sync="TempdelDialog" width="420px">
        <div>
          <el-form :inline="true" :model="formChangeline" class="demo-form-inline" label-width="90px">
            <el-form-item label="模型标识">
              <el-input v-model="formChangeline.modelKey" placeholder="模型标识key"></el-input>
            </el-form-item>
            <el-form-item label="模型名称">
              <el-input v-model="formChangeline.modelName" placeholder="模型名称（备注）"></el-input>
            </el-form-item>
            <el-form-item label="价格">
              <el-input v-model="formChangeline.price" placeholder="价格"></el-input>
            </el-form-item>
            <el-form-item label="旧文件名称">
              <el-input v-model="formChangeline.modelFileName" placeholder="类型(test/default)"></el-input>
            </el-form-item>
            <el-form-item label="文件">
              <el-upload class="upload-demo" drag ref="uploadchangeTemp" :http-request="onUploadChangeTemp" action=""
                :on-preview="handlePreviewTemp" :on-remove="handleRemoveTemp" :file-list="fileListTemp"
                :on-change="handleFileChange" :on-success="uploadSuccess" :multiple="true" :auto-upload="false"
                accept="" :limit="50" :on-exceed="OnExceedTemp">
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              </el-upload>
            </el-form-item>
            <el-form-item label="启用/禁用">
              <el-switch v-model="formChangeline.enable" @change="ChSwitch(formChangeline.enable)">
              </el-switch>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="CancelchangeFiles">取消上传</el-button>
          <el-button type="primary" @click="Chtermine">确定上传</el-button>
        </span>
      </el-dialog>

      <!-- 文件修改 -->
    </el-card>
  </div>
</template>

<script>
import { ModelList, EnableDisable, DelMoban, MobanList, AddMoban ,ChangeMoban} from '@/api/table'
export default {
  data() {
    return {
      TemplateList: [],
      UpTempDialog: false,
      TempdelDialog: false,
      UpTemplate: {
        UpTempUser: '',
        TempFileName: ''
      },
      pageCode: 1,
      pageSize: 10,
      fileListTemp: [],
      formInline: {
        modelKey: "",
        modelName: '',
        price: '',
        groups: ''
      },
      formChangeline: {
        id: '',
        modelKey: "",
        modelName: '',
        file: '',
        price: '',
        modelFileName: '',
        enable: ''
      },
      changeswitch:"",
      Upqueren:''
    };
  },
  created() {
    this.getMObanLost()
  },
  methods: {
    // 查询列表
    async getMObanLost() {
      ModelList(this.pageCode, this.pageSize).then(res => {
        if (res.code === 1000) {
          this.TemplateList = res.data.value
        } else {
          this.$message({
            message: res.message,
            type: 'error',
            duration: 1000
          });
        }
      })
    },
    // 启用/关闭按钮
    async changeSwitch(row) {
      let Edata = {
        modelKey: row.modelKey,
        enable: row.enable
      }
      let res = await EnableDisable(Edata)
      console.log(res, "123")
    },
    // 删除模版
    async DelMoban(row) {
      let data = {
        modelKey: row.modelKey
      }
      let res = await DelMoban(data)
      // console.log(res, "123")

    },
    ChangeMobanx(row) {
      // console.log(row)
      this.TempdelDialog = true;
      this.formChangeline.modelKey = row.modelKey;
      this.formChangeline.modelName = row.modelName;
      this.formChangeline.price = row.price;
      this.formChangeline.modelFileName = row.modelFileName;
      this.formChangeline.id = row.id;
      this.formChangeline.enable = row.enable;
      if(row.enable == true){
        this.changeswitch = 1;
      }else if(row.enable == false){
        this.changeswitch = 0;

      }
    },
    ChSwitch(row){
      if(row==true){
        this.changeswitch = 1;
        console.log(this.changeswitch,"open")
      }else if(row==false){
        this.changeswitch = 0;
        console.log(this.changeswitch,"close")
      }
    },
    // 查询列表
    // 清空每一项的值
    clearObject(obj) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          obj[key] = '';
        }
      }
    },


    // 文件上传
    FileUploads() {
      this.UpTempDialog = true;
    },

    async onUploadTemp(file, fileList) {
      // console.log(file, "文件上传111111111111111111")
      let formData = new FormData();
      formData.append("file", file.file);
      this.Upqueren = file.file
      formData.append("modelKey", this.formInline.modelKey);
      formData.append("modelName", this.formInline.modelName);
      formData.append("price", this.formInline.price);
      formData.append("groups", this.formInline.groups);
      let UpFiles = await AddMoban(formData);
      // console.log(UpFiles,"88888")
    },
    // 确定上传
    Determine() {
      // if()
      if(this.Upqueren ==''){
        this.$message({
          message: '请选择文件和输入参数',
          type: 'error',
          duration: 1000
        });

      }else{
        this.$refs.uploadTemp.submit();
        this.UpTempDialog = false;
      }
     
    },

    // 模版修改
   async onUploadChangeTemp(file, fileList){
      let formData = new FormData();
      formData.append("id", this.formChangeline.id);
      formData.append("modelKey", this.formChangeline.modelKey);
      formData.append("modelName", this.formChangeline.modelName);
      formData.append("file", file.file);
      formData.append("price", this.formChangeline.price);
      formData.append("modelFileName", this.formChangeline.modelFileName);
      formData.append("enable", this.changeswitch);
      let UpFiles = await ChangeMoban(formData);
    },
    Chtermine(){
      this.TempdelDialog = false;
      this.$refs.uploadchangeTemp.submit();
    },
    // 取消上传清空文件
    CancelFiles() {
      this.UpTempDialog = false;
      this.$refs.uploadTemp.clearFiles();
    },
    CancelchangeFiles() {
      this.TempdelDialog = false;
      this.$refs.uploadchangeTemp.clearFiles();
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreviewTemp(file) {
      console.log(file, "1");
    },
    // 	文件列表移除文件时的钩子
    handleRemoveTemp(file, fileList) {
      console.log(file, fileList, "文件列表移除文件时的钩子");
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
    handleFileChange(file, fileList) {
      console.log(file, fileList, '文件改变handleFileChange')
      fileList.forEach((val, index) => {
        console.log(val, index)
      })
    },
    // 上传成功调用的钩子
    uploadSuccess(response, file, fileList) {
      console.log('上传成功')
    },
    OnExceedTemp() {
      this.$message({
        message: "文件上传超出限制",
        type: 'error'
      });
    },
    // 重置
    Resetting() {
      this.clearObject(this.Upline)
    },
    // 分页
    async handleSizeChange(val) {
      this.pageSize = val;
      this.getMObanLost()
    },
    async handleCurrentChange(val) {
      this.pageCode = val;
      this.getMObanLost()

    },
  },
};
</script>

<style lang="scss" scoped></style>
